<template>
  <div class="analysis">
    <SettingHeader title="项目数据分析"></SettingHeader>
    <div class="analysis-content">
      <div v-for="(item, index) in processList" class="analysis-content-module" :key="index" @click="viewClick(item)">
        <SvgIcon :name="item.icon" />
        {{ item.name }}
      </div>
      <div class="analysis-content-module center" @click="addClick">
        <SvgIcon name="project-plus" />
      </div>
    </div>
    <AnalysisAdd v-model="addVisible" @refresh="refresh"></AnalysisAdd>
    <AnalysisView ref="viewRef" v-model="viewVisible" :url="url"></AnalysisView>
  </div>
</template>

<script setup>
// 临时数据，暂时使用iframe渲染网页
const processList = ref([
  { name: '测试数据1', icon: 'process-user', url: 'https://webpack.js.org/' },
  { name: '测试数据2', icon: 'process-cost', url: 'https://webpack.js.org/' },
  { name: '测试数据3', icon: 'process-out', url: 'https://webpack.js.org/' },
])

const addVisible = ref(false)
const viewVisible = ref(false)
const viewRef = ref()
const url = ref('')

function addClick() {
  addVisible.value = true
}

function viewClick(data) {
  viewVisible.value = true
  url.value = data.url
}

function refresh(data) {
  if (data) {
    processList.value.push(data)
  }
}
</script>

<style lang="scss" scoped>
.analysis {
  &-content {
    box-sizing: border-box;
    padding: 20px;
    height: calc(100vh - 87px);
    display: grid;
    justify-content: space-between;
    grid-template-columns: repeat(auto-fill, 240px);
    grid-template-rows: repeat(auto-fill, 80px);
    grid-row-gap: 25px;
    overflow: auto;
    &-module {
      height: 80px;
      border-radius: 12px;
      border: 1px solid #e6e7eb;
      background-color: #f6f7fd;
      @include use-flex(center, normal);
      padding: 10px;
      transition: all 1s;
      &:hover {
        cursor: pointer;
        box-shadow: 2px 2px 8px 0px #000;
        transition: all 0.3s;
      }
      .svg-icon {
        width: 50px !important;
        height: 50px !important;
        margin-right: 20px;
      }
    }
    .center {
      justify-content: center;
    }
  }
}
</style>
